<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <div class="name">
                    <div class="title">管理员端</div>
                </div>
            </div>
            <el-form label-position="top" :rules="state.rules" :model="state.dataForm" ref="loginForm"
                     class="login-form">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model.trim="state.dataForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model.trim="state.dataForm.password" autocomplete="off"></el-input>
                </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input type="text" v-model.trim="state.dataForm.code" autocomplete="off"></el-input>
              </el-form-item>
              <div class="code-container" style="height: 50px; width: 100px">
                <img :src="store.getters.getCode" alt="看不清？点我更换" @click="funcCode"/>
              </div>
                <el-form-item>
                    <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
                    <!--                    <el-checkbox v-model="state.checked" @change="!state.checked">下次自动登录</el-checkbox>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {getCode, login} from '@/api/user'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
import {ElLoading} from "element-plus";


import { useBgmMeteor } from "./hooks/useBgmMeteor.ts";

const { handleInitMeteor } = useBgmMeteor();


    const loginForm = ref(null)
    const store = useStore()
    const router = useRouter()

    // 获取验证码
    const funcCode = () => {
      getCode().then((res) => {
        console.log(res);
        store.commit("saveCode", res.data);
      });
    }


    onMounted(() => {
      handleInitMeteor();
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        loading.close()
      }, 1000);
      funcCode();
    });

    const state = reactive({
        dataForm: {
            username: '',
            password: '',
            code: '',
        },
        rules: {
            username: [
                {required: 'true', message: '账户不能为空', trigger: 'blur'}
            ],
            password: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ],
            code: [
              {required: 'true', message: '验证码不能为空', trigger: 'blur'}
            ]
        }
    });
    const submitForm = () => {
        // 显示正在加载
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
          loading.close()
        }, 2000);
        loginForm.value.validate((valid) => {
          loading.close();
          if (valid) {
                login(state.dataForm).then((res) => {
                    console.log(res)
                    //保存用户名和id
                    store.commit('saveUsernameAndId', res.data)
                    //保存token
                    store.commit("saveToken")
                    //跳转首页introduce
                    router.push({path: "/"})
                })
            } else {
              loading.close();
              loading.lock = false;
              return false;
            }
        })
    }
    const resetForm = () => {
        loginForm.value.resetFields();
    }
</script>

<style scoped>
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-image: url("@/assets/back.jpg");
        background-color: #fff;
    }

    .login-container {
        width: 420px;
        height: 500px;
        background-color: #a5e7fc;
        border-radius: 4px;
        box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head .title {
        font-size: 28px;
        color: #1BAEAE;
        font-weight: bold;
    }

    .head .tips {
        font-size: 12px;
        color: #999;
    }

    .login-form {
        width: 70%;
        margin: 0 auto;
    }

    .login-form >>> .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    .login-form >>> .el-form-item {
        margin-bottom: 0;
    }
</style>
